<template>
    <div class="node-panel grid-panel grid-panel-mark">
        <div class="pull-left text-box">
            <label>点击标记脏数据</label>
        </div>
        <Search-input @trigger="searchData"></Search-input>
        <Mark-table ref="table" :markData="markData" :originMark="originMark" @rowCheck="rowCheck" :loading="loading" :model="model" :data="tableData">
        </Mark-table>
        <div class="pull-left count-box">
            <label>当前已标记
                <span class="count">{{markCount}}</span> 条脏数据</label>
        </div>
        <div class="table-page">
            <Page :total="totalCount" show-elevator @on-change="fetch"></Page>
        </div>

    </div>
</template>
<script>
import gridPanel from './gridPanel'
import MarkTable from '@/components/gridMarkTable'
//import MarkTable from '@/components/gridTableSample'
export default {
    extends: gridPanel,
    data() {
        return {
            markData: {},
            originMark: {},
            markCount: 0
        }
    },
    watch: {
        tableData() {
            this.tableData.forEach((data) => {
                if (data.status === 3) {
                    this.originMark[data.id] = true
                }
            })
        }
    },
    created() {
        //脏数据数量一般从后端获取
        this.markCount = 0;
        for (let i in this.markData) {
            i
            this.markCount++
        }
    },
    methods: {
        rowCheck({ index, id, value }) {
            this.$set(this.markData, id, !this.markData[id])
            if (!this.markData[id]) {
                this.markCount--
            } else {
                this.markCount++
            }
        }
    },
    components: {
        MarkTable
    }

}
</script>
<style lang="less">
.grid-panel-mark {
    .text-box {
        margin-top: 8px;
        color: #2d8cf0;
        margin-left: 2px;
    }
    .count {
        color: #cd5a5a
    }
    .count-box {
        margin-top: 18px;
    }
    tr.active>td {
        background-color: #fff8fb !important;
    }
}
</style>
